<template>
  <van-nav-bar left-text="确认订单" left-arrow @click-left="onClickLeft" class="p" />

  <van-tabs v-model:active="active">
    <van-tab title="配送">
      <div class="ps">
        <div style="display: flex; justify-content: space-between;">
          <div>
            <van-icon name="location-o" style='color:rgb(37,179,79)' />
            请选择收货地址
          </div>
          <van-icon name="arrow" />
        </div>
        <div style="color: rgb(236,153,102); font-size: 15px; margin-top: 20px;">选择后，商品价格将随配送门店更新</div>
      </div>
      <div class="shijian">
        <div style="display: flex; justify-content: space-between;margin: 5px; font-size: 16px;">
          送达时间
          <div>
            选择地址后可选
            <van-icon name="arrow" />
          </div>
        </div>
        <div style="overflow: auto; height: 200px;" >
          <div class="tupian" v-for="item in product" :key="item.id">
            <div style="display: flex; justify-content: left;">
              <img :src="item.image" alt="" style="width: 60px;height: 60px;">
              <div style="font-size: 14px; margin: 5px;">
                <div style="margin: 10px 0;">{{item.name}}</div>
                <div style="margin: 10px 0;">单价:￥{{item.price}} &nbsp; 数量:{{item.number}}</div>
              </div>
            </div>
            <div style="font-size: 18px; font-weight: bold;">
              ￥{{item.price}}
            </div>
        </div>
        </div>
        
      </div>
      <div class="sping">
        <div>
          <div>
            商品总额
          </div>
          <div>
            ￥{{ sum }}
          </div>
        </div>
        <div style="margin: 20px 0;">
          <div>
            配送费
          </div>
          <div style="color: rgb(190,190,190);">
            根据地址计算
          </div>

        </div>

        <div style="margin: 20px 0;">
          <div>
            <van-icon name="coupon-o" style="color: red;" />
            优惠劵
            <van-icon name="question-o" />
          </div>
          <div style="color: rgb(190,190,190);">
            选择地址后可选
            <van-icon name="arrow" />
          </div>
        </div>

        <div>
          <div>
            备注
          </div>
          <div style="color: rgb(190,190,190);">
            选填
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
      <div class="zhifu">
        <div style="font-size: 18px; font-weight: bold; margin: 5px;">
          支付方式
        </div>

        <van-radio-group v-model="check">
          <van-cell-group inset>
            <div style="display:flex; justify-content: left;">
              <van-icon name="balance-o" style="line-height: 49px; color: orange;" />
              <van-cell title="余额支付（￥0）" >
                <template #right-icon>
                  <span style="color: rgb(190,190,190); line-height: 23px; margin-right: 10px;">余额不可用</span>
                  <van-radio name="0" disabled />
                </template>
              </van-cell>
            </div>

            <div style="display:flex; justify-content: left;">
              <van-icon name="alipay" style="line-height: 49px; color: blue;" />
              <van-cell title="支付宝支付" clickable @click="check = '1'">
                <template #right-icon>
                  <van-radio name="1" checked-color="green" />
                </template>
              </van-cell>
            </div>

            <div style="display:flex; justify-content: left;">
              <van-icon name="wechat-pay" style="line-height: 49px; color: green;" />
              <van-cell title="微信支付" clickable @click="check = '2'">
                <template #right-icon>
                  <van-radio name="2" checked-color="green" />
                </template>
              </van-cell>
            </div>

          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="btn" style="display: flex; justify-content: right;">
        <div style="line-height: 50px; margin-right: 20px;">实付：<span style="color: red; font-weight: bold; font-size: 18px;">￥{{ sum }}</span> </div>
        
        <van-button type="danger" style="border-radius: 20px;width: 100px;">立即支付</van-button>
      </div>
    </van-tab>
    <van-tab title="自提">
      <div class="ps">
        <div style="display: flex; justify-content: space-between;">
          <div>
            <van-icon name="location-o" style='color:rgb(37,179,79)' />
            请选择收货地址
          </div>
          <van-icon name="arrow" />
        </div>
        <div style="color: rgb(236,153,102); font-size: 15px; margin-top: 20px;">选择后，商品价格将随配送门店更新</div>
      </div>
      <div class="shijian">
        <div style="display: flex; justify-content: space-between;margin: 5px; font-size: 16px;">
          送达时间
          <div>
            选择地址后可选
            <van-icon name="arrow" />
          </div>
        </div>
        <div style="overflow: auto; height: 200px;" >
          <div class="tupian" v-for="item in product" :key="item.id">
            <div style="display: flex; justify-content: left;">
              <img :src="item.image" alt="" style="width: 60px;height: 60px;">
              <div style="font-size: 14px; margin: 5px;">
                <div style="margin: 10px 0;">{{item.name}}</div>
                <div style="margin: 10px 0;">单价:￥{{item.price}} &nbsp; 数量:{{item.number}}</div>
              </div>
            </div>
            <div style="font-size: 18px; font-weight: bold;">
              ￥{{item.price}}
            </div>
        </div>
        </div>
      </div>
      <div class="sping">
        <div>
          <div>
            商品总额
          </div>
          <div>
            ￥{{ sum }}
          </div>
        </div>
        <div style="margin: 20px 0;">
          <div>
            <van-icon name="ecard-pay" style="color: green;" />
            优选卡
            <van-icon name="question-o" />
          </div>
          <div style="color: rgb(190,190,190);">
            暂无优选卡
          </div>

        </div>

        <div style="margin: 20px 0;">
          <div>
            <van-icon name="coupon-o" style="color: red;" />
            优惠劵
            <van-icon name="question-o" />
          </div>
          <div style="color: rgb(190,190,190);">
            选择地址后可选
            <van-icon name="arrow" />
          </div>
        </div>

        <div>
          <div>
            备注
          </div>
          <div style="color: rgb(190,190,190);">
            选填
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
      <div class="zhifu">
        <div style="font-size: 18px; font-weight: bold; margin: 5px;">
          支付方式
        </div>

        <van-radio-group v-model="check1">
          <van-cell-group inset>
            <div style="display:flex; justify-content: left;">
              <van-icon name="balance-o" style="line-height: 49px; color: orange;" />
              <van-cell title="余额支付（￥0）" >
                <template #right-icon>
                  <span style="color: rgb(190,190,190); line-height: 23px;margin-right: 10px;" >余额不可用</span>
                  <van-radio name="0" disabled />
                </template>
              </van-cell>
            </div>

            <div style="display:flex; justify-content: left;">
              <van-icon name="alipay" style="line-height: 49px; color: blue;" />
              <van-cell title="支付宝支付" clickable @click="check1 = '1'">
                <template #right-icon>
                  <van-radio name="1" checked-color="green" />
                </template>
              </van-cell>
            </div>

            <div style="display:flex; justify-content: left;">
              <van-icon name="wechat-pay" style="line-height: 49px; color: green;" />
              <van-cell title="微信支付" clickable @click="check1 = '2'">
                <template #right-icon>
                  <van-radio name="2" checked-color="green" />
                </template>
              </van-cell>
            </div>

          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="btn" style="display: flex; justify-content: right;">
        <div style="line-height: 50px; margin-right: 20px;">实付：<span style="color: red; font-weight: bold; font-size: 18px;">￥{{ sum }}</span> </div>
        
        <van-button type="danger" style="border-radius: 20px;width: 100px;">立即支付</van-button>
      </div>
    </van-tab>
  </van-tabs>
</template>
  
<script setup>
import { ref, onMounted } from 'vue'
import axios from '../utils/axios.js'
// import { onMounted } from 'vue'
onMounted(() => {
  // 购物车数据
  axios.get('/inquire_shop_order').then((res) => {
    product.value = res.data
    for (let i = 0; i < product.value.length; i++) {
  sum.value += product.value[i].price * product.value[i].number 
}
sum.value = sum.value.toFixed(2)
    console.log(product.value)
    console.log(sum.value)
  })
})

const product = ref([
  { id: 1, name: '商品1', price: 100, number: 1, image: '', user_id: 1, dish_id: 1 },
  { id: 2, name: '商品1', price: 80, number: 2, image: '', user_id: 1, dish_id: 1 },
  { id: 3, name: '商品1', price: 100, number: 1, image: '', user_id: 1, dish_id: 1 },
  { id: 4, name: '商品1', price: 100, number: 1, image: '', user_id: 1, dish_id: 1 },

])

const sum = ref(0)

// f返回上一个页面
const onClickLeft = () => history.back();
const check = ref('1');
const check1 = ref('1');
const active = ref(0);

</script>
  
<style >
.van-nav-bar__content {
  background-color: rgb(244, 245, 247);
}

.van-tabs {
  margin: 10px;
  background-color: rgb(244, 245, 247);

}

.van-nav-bar__text {
  color: black;
  font-size: 18px;
}

.van-nav-bar .van-icon {
  color: black;
  font-size: 18px;
}

.van-tabs__line {
  background: transparent;
}

.van-tab--active {
  background-color: white;
  border-radius: 10px 10px 0 0;
  color: rgb(37, 179, 79);


}

.van-tab__text--ellipsis {
  font-size: 17px;
  letter-spacing: 2px;
}

.van-tabs__nav {

  background-color: rgb(235, 239, 240);

}

.van-cell {
  padding: 10px 0;
}

.ps {
  font-size: 18px;
  font-weight: bold;
  background-color: white;
  margin-bottom: 20px;
  padding: 17px;
  border-radius: 0 0 10px 10px;

}

.shijian,
.sping,
.zhifu,
.btn {
  font-size: 15px;
  background-color: white;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 10px;
}

.tupian {
  margin: 10px;
  padding: 10px;
  padding-right: 20px;
  background-color: rgb(244, 245, 247);
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
}



.sping>div {
  display: flex;
  justify-content: space-between;
}

.van-cell {
   
    display: flex;
   
    align-items: flex-start;
}

.btn{
  padding: 5px;
}
</style>